<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { onMounted,ref } from 'vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Autoplay, Pagination } from 'swiper/modules'

const modules = [Autoplay, Pagination]
let swiperRef = ref< typeof Swiper | null>(null);
const slides = [
  {
    title: '精准医疗检测解决方案',
    desc: '创新科技守护全民健康',
    bgColor: 'var(--sansure-light)'
  },
  {
    title: '智能化医疗设备',
    desc: '为慢性病管理提供全面支持',
    bgColor: '#f5f9ff'
  }
]

onMounted(() => {

});
const onPrevButtonClick = () => {
  if (swiperRef.value) {
    swiperRef.value!.slidePrev();
    const keys = Object.keys(swiperRef.value);
    keys.forEach(key => {
      if (typeof swiperRef.value![key] === 'function') {
        console.log(key);
      }

    });
    swiperRef.value;

  }

};
const onNextButtonClick = ()=> {
  if (swiperRef.value) {
    swiperRef.value.slideNext();
    console.log('下一个按钮被点击，已切换到下一个幻灯片');
  }
};

const swiperOptions = ref({
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  loop: true, // 循环切换
  speed: 500 // 切换速度
});
</script>

<template>
  <div class="hero-carousel">
    <swiper ref="swiperRef"
      :modules="modules"
      :options="swiperOptions"
      :autoplay="{ delay: 5000 }"
      :pagination="{ clickable: true }"
      :loop="true"
      :allowSlidePrev="true"
      :allow-slide-next="true"
      navigation
      class="swiper-style"
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <div 
          class="slide-content"
          :style="{ backgroundColor: slide.bgColor }"
        >
          <h2>{{ slide.title }}</h2>
          <p>{{ slide.desc }}</p>
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" ></div>
      <div class="swiper-button-next" ></div>
<!--      <div class="swiper-button-prev" @click="onPrevButtonClick"></div>-->
<!--      <div class="swiper-button-next" @click="onNextButtonClick"></div>-->
    </swiper>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/_variables.scss";

.swiper{
  --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
  --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px;/* 设置按钮大小 */
}

.hero-carousel {
  width: 100%;
  height: 600px;

  .swiper-style{
    height: 100%;
  }

  .slide-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10%;
    
    h2 {
      color: $sansure-dark;
      font-size: 2.8rem;
      margin-bottom: 1.5rem;
    }
    
    p {
      color: $sansure-blue;
      font-size: 1.5rem;
    }
  }

  :deep(.swiper-pagination-bullet-active) {
    background: $sansure-blue;
  }
}
</style>